fix brave/brave-browser#26576

Deleted previous WDP dialog.
Use Infobar UI for WDP CTA instead of modal dialog.
And removed bottom shadow from infobar container.

Light mode

Dark mode

This custom infobar has below three state based on width.

Wide layout with wide horizontal padding

Wide layout with narrow horizontal padding

Narrow layout

Resolves

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

npm run test brave_unit_tests -- --filter=WebDiscoveryCTATest*
npm run test brave_browser_tests -- --filter=WebDiscoveryTest*

1. Launch brave with any profile(clean or existing)
2. Set non Brave Search as a default search engine
3. Load https://search.brave.com/ or with any query like https://search.brave.com/search?q=Brave&source=web
4. Check WDP infobar is not shown
5. Set Brave Search as a default search engine and enable WDP via brave://settings/?search=web+discovery
6. Repeat step 3 and check WDP infobar is not shown
7. disable WDP via brave://settings/?search=web+discovery
8. Repeat step3 and check WDP infobar is shown
9. Click x and check infobar is hidden
10. InfoBar is shown 5 times at most and once per day
11. To make infobar show again, edit last_displayed time like deleting last digit to simulate time passed more than 1 day from user dir's Preferences file after shutdown

      "web_discovery": {
         "cta_state": {
            "count": 2,
            "dismissed": true,
            "id": "v1",
            "last_displayed": "13313568560800197"
         }
      },

12. Relaunch Brave and check infobar is shown again when search.brave.com is loaded
13. Click No thanks and check infobar is not shown anymore
14. When new cta id is set, infobar will be shown although it's dimissed already
15. To simulate new cta id, change id in above Preferences to any other string
16. Check infobar is shown again when loading search.brave.com